<template>
    <view class="slider_menu">
        <view class="menu menu-box-slider">
            <view class="menu-item" v-for="item,idx in menuArr" :key="idx" @click="chooseFunc(idx)">
                <view class="i" :class="{'active':value == idx }">{{item.name}}</view>
            </view>
        </view>
        <view class="a-box" ref='a-box' :style="activeBoxCssArr[value]" ></view>
    </view>

</template>

<script>

const app = getApp();

export default {
    props:{
        menuArr:{
            type:Array,
            detault: [{ name: '全部', 'color': '#1287fa' }]
        },
        value: {
            type: Number | String ,
            default: 0
        }
    },
    model: { 
        prop: 'value', 
        event: 'input'
    },
    components: {  },
    data () {
        return {
            activeBoxCssArr:[]
        }
    },
    computed: {
     
    },
    onShow () {

    },
    watch:{
        menuArr: {
            deep: true,
            immediate:true,
            handler (current) {
                this.initEle()
            }
        }
    },
    methods: {

        //选中
        chooseFunc(idx){

            if( this.value == idx) return

            this.$emit('input', idx)

            this.$emit('change',idx)

        },
        //获取元素位置
        initEle() {
            const query = uni.createSelectorQuery().in(this);

            //盒子元素位置
            let that = this

            //异步的
            query.select('.slider_menu').boundingClientRect(data => {
                // console.log("父级",data);
                if (data) {

                    that.initChildPosition( data )
                
                }
            }).exec();

        },
        //获取子元素位置
        initChildPosition( faPosition ){

            let that = this

            let activeBoxCssArr = [];
            const query = uni.createSelectorQuery().in(this);
            query.selectAll('.menu-item').boundingClientRect(data => {
                // console.log("得到布局位置信息" + JSON.stringify(data));
                // console.log("节点离页面顶部的距离为",data);
                if (data) {
                    data.map((d, i) => {


                        let left = d.left - faPosition.left,
                            top = d.top - faPosition.top,
                            w = d.width,
                            h = d.height;

                        let cssStr = `left:${left}px;top:${top}px;width:${w}px;height:${h}px;`

                        activeBoxCssArr.push(cssStr)
                    })

                    that.activeBoxCssArr = activeBoxCssArr
                }
            }).exec();


        }
    }
}
</script>

<style scoped lang="scss">

.slider_menu {
    line-height: 1;
    position: relative;
    display: inline-block;
    width: 100%;
    background: rgba(0,0,0,.1);
    height: 68rpx;
    border-radius: 6px;
    .menu {
        position: relative;
        white-space: nowrap;
        margin: 0;
        text-align: left;
        display: inline-block;
        border-radius: 6px;
        // padding: 3px;
        z-index: 2;
        top: -3%;
        left: -3%;
        width: 106%;
        height: 106%;
       
        .menu-item {
            display: inline-block;
            cursor: pointer;
            width: 50%;
            height: 100%;
            text-align: center;
            // height: 76rpx;
            line-height: 74rpx;
            .i {
                display: block;
                text-decoration: none;
                position: relative;
                color: #888;
                // height: 28px;
                // line-height: 28px;
                text-align: center;
                font-size: 12px;
                padding: 0 10px;
                min-width:58px ;
                text-align: center;
                -webkit-transition: 0.25s;
                transition: 0.25s;
                &.active {
                    color: #000;
                }
            }
        }
    }
    .a-box {
        position: absolute;
        -webkit-transition: 0.25s;
        transition: 0.25s;
        width: 0px;
        height: 0px;
        left: -5%;
        top: -5%;
        opacity: 1;
        // height: 110%;
        // width: 110%;
        box-shadow: 0 2px 20rpx #eaeaea;
        background: #fff;
        border-radius: 6px;
    }
}
</style>
